<template>
  <div class="app-home">
    <el-page-header content="首页" title="后台管理系统" icon=""></el-page-header>
    <!-- <el-card class="welcome-card">
        <div class="welcome">
          <el-avatar :size="80" :src="circleUrl" />
          <div class="title">欢迎 {{$store.state.user_info.userName}} 回来</div>
        </div>
    </el-card> -->
    <div class="filter-list">
      <div class="filter">
        <div class="lf">
          <el-button type="primary" @click="isDialog = true" :icon="Plus"> 新增短网址</el-button>
          <!-- <el-button  type="success" :icon="Tickets">数据报表</el-button> -->
        </div>
        <div class="rg">
          <el-input placeholder="输入短网址搜寻" v-model="formFilter.search" @blur="changeListData">
            <template #append>
              <el-button type="primary" :icon="Search" @click="changeListData" />
            </template>
          </el-input>
          <!-- <el-button type="primary">搜寻</el-button> -->
        </div>
      </div>
    </div>
    <div class="filter">
      <div class="lf">
        <h2>短网址列表</h2>
      </div>
      <div class="rg">
        <div class="filter-select">
          <span>排序</span>
          <el-select @change="changeListData" v-model="formFilter.sort" placeholder="Select">
            <el-option label="创立时间" value="creationTime" />
            <el-option label="连结点击数" value="requestCount" />
          </el-select>
        </div>
        <div class="filter-select">
          <span>每页笔数</span>
          <el-select v-model="formFilter.pages" placeholder="Select" @change="changeListData">
            <el-option label="5" :value="5" />
            <el-option label="10" :value="10" />
            <el-option label="20" :value="20" />
            <el-option label="50" :value="50" />
          </el-select>
        </div>
      </div>
    </div>
    <List ref="listComponent" :filter="formFilter"></List>
    <el-pagination background layout="prev, pager, next" :total="$store.state.total"
      v-model:current-page="formFilter.page" :default-page-size="formFilter.pages" @current-change="changeListData" />
    <AddLine v-model="isDialog" title="新增短网址" @close="isDialog = false" @success="restListData" v-if="isDialog"></AddLine>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import AddLine from './components/AddLine.vue';
import List from './List.vue';
import { Search, Plus, Tickets } from '@element-plus/icons-vue'
const isDialog = ref(false)
const formFilter = reactive({
  search: "",
  sort: "creationTime",
  page: 1,
  pages: 5
})
//刷新数据
const listComponent = ref()
const restListData = () => {
  isDialog.value = false
  listComponent.value.restListData()
}
//筛选数据
const changeListData = () => {
  restListData()
}
</script>

<style lang="scss" scoped>
.app-home {
  .el-progress--line {
    margin: 10px 0;
    width: 350px;
  }

  .welcome-card {
    margin: 20px 0;

    .welcome {
      display: flex;
      align-items: center;

      .el-avatar {
        margin-right: 10px;
      }

      .title {
        font-size: 18px;
      }
    }
  }

  .filter-list {
    padding: 20px 0;
  }

  .filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;

    .rg {
      display: flex;

      .el-input {
        width: 430px;
        border-end-end-radius: 0;
      }
    }

    .filter-select {
      margin-left: 20px;

      .el-select {
        margin-left: 10px;
        width: 150px;
      }
    }
  }
}
</style>